import "./App.scss";
import React, { useState, useCallback } from "react";
import Menu from "./sences/Menu";
import CureRoom from "./sences/CureRoom";
import Talk from "./sences/Talk";
import Tips from "./sences/Tips";
import EILLEEN_MEMORY_FROM_CLOUDS from "./talks/EilleenMemoryFromClouds";
import { useSpring, animated } from "react-spring";
import { fadedAnimation } from "./animate";
function App() {
  const [state, setState] = useState("Menu");
  const [cureRoomIndex, setCRIndex] = useState(0);

  const handleState = useCallback((newState) => {
    if (newState) {
      setState(newState);
    }
  }, []);

  const handleRoomIndex = useCallback((index, type) => {
    type === "CUREROOM" && setCRIndex(index);
  }, []);

  const EilleenStyleOpt = {
    textColor: "#ffffff",
  };

  return (
    <div id="app">
      <animated.div style={useSpring(fadedAnimation)}>
        {state === "Menu" && <Menu handleState={handleState} />}
        {state === "EilleenMemoryFromClouds" && (
          <Talk
            dialog={EILLEEN_MEMORY_FROM_CLOUDS}
            styleOpt={EilleenStyleOpt}
            handleState={handleState}
            endState="Start"
          />
        )}
        {state === "CURETIPS" && (
          <Tips focus={true} handleState={handleState} blurState="Start" />
        )}
      </animated.div>
      {state === "Start" && (
        <CureRoom
          handleState={handleState}
          index={cureRoomIndex}
          handleRoomIndex={handleRoomIndex}
        />
      )}
    </div>
  );
}

export default App;
